<template>
	<view>
		<nav-bar :title="title" :leftIconSize="0"></nav-bar>
		<view class="outer">
			<view class="title">
				小工具
			</view>
			<u-row class="flexWrap">
				<u-col v-for="(listItem,listIndex) in toolList" @click="openMenu(listItem.moduleUrl)" :span="3" class="">
					<view class="menuIcon">
							<image :src="listItem.imageUrl" mode="widthFix" style="" class="iconImg" ></image>
					</view>
					<view class="menuBody">{{listItem.title}}</view>
				</u-col>
			</u-row>
		</view>
		<view class="outer">
			<view class="title">
				vue组件
			</view>
			<u-row class="flexWrap">
				<u-col v-for="(listItem,listIndex) in vueDemoList" @click="openMenu(listItem.moduleUrl)" :span="3" class="">
					<view class="menuIcon">
							<image :src="listItem.imageUrl" mode="widthFix" style="" class="iconImg" ></image>
					</view>
					<view class="menuBody">{{listItem.title}}</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				title: "开发工具",
				toolList: [
					{
						moduleUrl:'stamp/stamp',
						imageUrl:'/static/img/toolLogo/stamp.png',
						title:'时间戳转换'
					}
				],
				vueDemoList: [
					{
						moduleUrl:'shuttle/shuttle',
						imageUrl:'/static/img/toolLogo/stamp.png',
						title:'穿梭框'
					},
					{
						moduleUrl:'lottie/lottie',
						imageUrl:'/static/img/toolLogo/stamp.png',
						title:'Lottie动画'
					}
				]
			}
		},
		methods:{
			openMenu(moduleUrl) {
				uni.navigateTo({
					url:this.$config.pagePath.develop_base_url+ moduleUrl
				})
			},
		}
	}
</script>

<style>
	.outer {
		border-radius: 20rpx;
		margin: 20rpx;
		box-shadow: 0 2rpx 10rpx #DDDDDD;
		padding:30rpx 30rpx 40rpx 30rpx ;
		background-color: #fff;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: 600;
	}
	
	.flexWrap{
		flex-wrap:wrap
	}
	.menuIcon {
		text-align: center;
		margin: 36rpx 0 10rpx 0;
	}
	.iconImg {
		width: 64rpx;
		height: 64rpx;
	}
	.menuBody {
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #666;
	}
</style>